<template>
<div id="box">
    <!--面包屑区域-->
  <el-breadcrumb>
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!--卡片视图区域-->
<el-card>
  <!--输入框和按钮-->
  <el-row :gutter="20">
    <el-col :span="8">
        <el-input placeholder="请输入内容" clearable v-model="queryinfo.query" @clear="search()">
    <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
  </el-input>
    </el-col>
    <el-col :span="4">
        <el-button type="primary" @click="goAddpage()">添加商品</el-button>
    </el-col>
  </el-row>
<!--表格区域-->
<el-table border stripe :data="goodslist">
    <el-table-column type="index" prop="#"></el-table-column>
      <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
      <el-table-column prop="goods_price" label="商品价格(元)" width="95px"> </el-table-column>
      <el-table-column prop="goods_weight" label="商品重量" width="70px"> </el-table-column>
      <el-table-column prop="add_time" label="创建时间" width="140px"> 
        <template v-slot="scope"> {{  scope.row.add_time | dateFormat  }}</template>
      </el-table-column>
      <el-table-column label="操作" width="130px">
          <template v-slot="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteGoods(scope.row.goods_id)"></el-button>
            </template>
    </el-table-column>
      </el-table>
   <!--分页-->
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryinfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
</div>
    </template>

<script>
export default {
    data() {
        return {
            //商品列表数据
            goodslist: [],
            queryinfo: {
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            total: 0
        }
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        //获取商品列表
        async getGoodsList() {
            let { data } = await this.$http.get("goods", { params: this.queryinfo })
            console.log(data)
            if (data.meta.status !== 200) return this.$message.error("商品列表数据获取失败")
            this.goodslist = data.data.goods
            this.total = data.data.total
        },
          //pagesize改变
        handleSizeChange(news){
            // console.log(news)
            this.queryinfo.pagesize=news
            this.getGoodsList()
        },
        //pagenum改变
        handleCurrentChange(news){
        //  console.log(news)
         this.queryinfo.pagenum=news
         this.getGoodsList()
        },
        //点击搜索
        search(){
            this.getGoodsList()
        },
        //点击删除，进行删除
       async deleteGoods(id){
           let h=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(h!=="confirm") return this.$message("已取消删除")
        let {data}=await this.$http.delete(`goods/${id}`)
        if(data.meta.status!==200) return this.$message.error("商品删除失败")
          this.$message.success("商品删除成功")
          this.getGoodsList()
        },
        //点击添加商品，跳转
        goAddpage(){
            this.$router.push("/goods/add")
        }
    }

}
</script>

<style lang="less" scoped>

</style>